<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单核对</title>
</head>
<style>
    .top-title:hover{
        cursor: pointer;
        color: #b31e22!important;
        underline: #b31e22!important;
    }

    .SearchBar input {
        height: 50px;
        width: 500px;
    }
    .selectBar {
        height: 60px;
    }
    .menuList{
        background-color: #efd0d0 !important;
        color: #FFFFFF!important;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>
<body>
<div id="app">
    <!--顶部用户导航栏-->
    <template>
        <div style="font-size: 14px;">
            <div style="display: flex;height: 60px;padding: 0 320px;background-color: #f5f5f5;border-radius: 10px">
                <div v-show="visibleAlready" style="margin-top: 3px">
                    <el-col :span="6">
                        <el-avatar style="height: 50px;width:50px;" :src="User.userImg"></el-avatar>
                    </el-col>
                    <el-col :span="18" style="line-height:50px">
                        <span style="padding-right: 30px;line-height: 40px;color: #666;margin-left:30px">{{User.realName}}</span>
                    </el-col>
                </div>
                <div v-show="visibleNotYet" style="margin-top: 10px">
                    <span style="padding-right: 20px;line-height: 40px;color: #666;">欢迎光临淘书网,请</span>
                    <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpLogin">登录</el-button>
                    <span style="padding-right: 20px;line-height: 40px;">|</span>
                    <el-button type="text" style="color: #666" class="top-title" @click="jumpRegister">注册</el-button>
                </div>
                <div style="flex: 1;display: flex;">
                    <div style="flex: 0.75;"></div>
                    <div style="width: 300px;display: flex;">
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpPersonalCenter"> <i class="el-icon-user"></i>个人中心</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCart"><i class="el-icon-shopping-cart-2"></i>购物车</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpOrders"><i class="el-icon-goods"></i>我的订单</el-button>
                        <el-button type="text" style="color: #666;margin-right: 10px;" class="top-title" @click="jumpCollect"><i class="el-icon-star-off"></i>我的收藏</el-button>
                        <el-button type="text" v-show="visibleAlready" style="color: #666;margin-right: 10px;" class="top-title" @click=" killSession"><i class="el-icon-switch-button"></i>退出登录</el-button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    </template>
    <div style="margin-left: 300px;margin-right: 300px;margin-top: 20px" >
        <el-steps :active="2" finish-status="success"  align-center :space="300">
            <el-step title="选择图书"></el-step>
            <el-step title="确认地址"></el-step>
            <el-step title="订单核对"></el-step>
            <el-step title="付款成功"></el-step>
        </el-steps>
            <el-card class="box-card" style="width:auto;margin-top: 10px">
                <div slot="header" class="clearfix" >
                    <b><span style="font-size: medium;">订单详情</span></b>
                </div>
                <span style="font-size: 25px">订单名称：{{this.Orders.name}}</span>
                <br><br>
                <span>订单号：{{this.Orders.no}}</span>
                <span style="margin-left: 200px">创建时间：{{this.Orders.creatTime}}</span>

                <el-table :data="ordersItems" border stripe width="40" style="margin-top: 10px">
                    <el-table-column align="center" type="index" label="ID"></el-table-column>
                    <el-table-column label="图片" >
                        <template slot-scope="scope">
                            <el-image style="width: 100px;height: 110px" :src="scope.row.bookImg"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bookName" label="书名" ></el-table-column>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        le-column>
                    <el-table-column prop="bookPrice" label="单价" ></el-table-column>
                    <el-table-column prop="quantity" label="购买数量">
                        <template v-slot="scope">
                            <span style="color:orangered">{{scope.row.quantity}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        <div style="margin-top: 20px;text-align: right">
            <span style="font-size: 20px;float: left">总价：<span style="color:orangered">{{this.Orders.totalPrice}}</span></span>
            <el-button type="danger" style="font-size: 20px" size="medium" @click="paymentTableVisible=true">付款</el-button>
        </div>
    </div>
    <el-dialog title="订单支付" :visible.sync="paymentTableVisible" center width="30%">
        <div style="text-align: center">
            <span style="font-weight: 700;color: #333">订单金额</span>
            <span style="margin-left: 15px;color: #fe8109;font: 700 26px tahoma">{{this.Orders.totalPrice}} 元</span>
            <div style="font-size: 40px;margin-top: 20px;margin-bottom: 20px">
                扫码支付
            </div>
            <img src="../img/pay/payCode.jpg" width="200px" height="200px">
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="paymentTableVisible = false">取消支付</el-button>
            <el-button type="primary" @click="paySuccess">我已支付</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<<script>
    new Vue({
        el: '#app',
        created() {
            //钩子函数，vue对象初始化后执行
            this.getUser()
            this.getOrdersId();
            this.getOrdersDetail()
            this.getOrders();
        },
        mounted() {
            //页面加载完成后，发送异步请求，获取所有数据
        },
        methods: {
            getOrders(){
                axios.post("/orders?ordersId="+ this.id
                ).then((res) => {
                    this.Orders=res.data;
                })
            },
            paySuccess(){
                axios.get("/orders/status?ordersId=" + this.id+"&type=pay"
                ).then((res) => {
                    if (res.data.code == 1) {

                        this.openFullScreen();
                        this.paymentTableVisible = false;
                        this.delay();
                    }
                })
            },
            getOrdersDetail() {
                // 发送ajax请求
                axios.get("/orders/detail?ordersId=" + this.id
                ).then((res) => {
                    this.ordersItems = res.data.data;
                    console.log(this.ordersItems);
                });
            },
            getOrdersId(){
                let url = window.location.href
                let p = url.split('?')[1]
                let params = new URLSearchParams(p)
                let id = params.get('ordersId')
                this.id=id
            },
            delay() {
                var self = this
                var t
                clearTimeout(t)
                t = setTimeout(function () {
                    window.location.href = "paySuccess.html"
                }, 1200)
            },
            openFullScreen() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                }, 2000);
            },
            getUser() {//获取用户名
                //发送ajax请求
                axios({
                    method:"get",
                    url:"/user",
                }).then(resp =>{
                    this.User = resp.data;
                    if (this.User !== null && this.User !== ""&& this.User !==undefined) {
                        this.visibleNotYet = false;
                        this.visibleAlready= true;
                    }else{this.User={username:null}}
                })
            },
            killSession() {//退出登录
                this.$confirm('确认退出登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.visibleNotYet = true;
                    this.visibleAlready = false;
                    //发送ajax请求
                    axios.post("/user/logout").then((res) => {
                    })
                    window.location.href = "../index.html"
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            jumpIndex(){
                location.href ="index.html";
            },
            jumpAllBook(){
                window.location.href ="allBook.html";
            },
            jumpLogin(){
                location.href ="/login_page/login.jsp";
            },
            jumpRegister(){
                location.href ="/login_page/register.jsp";
            },
            jumpCollect(){
                location.href ="/user_page/collect.html";
            },
            jumpPersonalCenter(){
                location.href ="personCenter.html";
            },
            jumpCart(){
                location.href ="cart.html";
            },
            jumpOrders(){
                location.href ="orders.html";
            },
            jumpPaySuccess(){
                location.href ="paySuccess.html";
            }
        },
        data() {
            return {
                User:[],//用户信息
                id:'',
                visibleNotYet:true,
                visibleAlready:false,
                input:'',
                Orders:{creatTime:''},
                paymentTableVisible:false,
                ordersItems:
                    [{bookName:'book',bookPrice:'23'},
                    {bookName:'111',bookPrice:'223'}]
            }
        }
    })
</script>
</html>